<template>
	<view>
		<u-mask :show="isShowLoading">
		    <view style="display: flex;justify-content: center;align-items: center;height: 100%;">
		        <u-loading mode="flower" size="60" /><text style="color:white;">上传中…</text>
		    </view>
		</u-mask>
		
		<pageheader :setting="settingdata"></pageheader>
		<view class="boxs">
			<!-- <view class="normalline">
				<view class="linetext"><text>*</text>货品规格</view>
				<u-input type="number" :border="false" placeholder="默认单规格,开启为多规格" placeholderStyle="color:#B9B9B9"
					:auto-height="false" class="lineputs" :disabled="true" :clearable="false" />
				<switch @change="doubleChange" color="#38BE8C" :checked="is_double" />
			</view> -->

			<view class="normalline" @click="geiclass()">
				<view class="linetext"><text>*</text>货品类目</view>
				<view class="linevalue" v-if="cate.name">{{cate.name}}</view>
				<text class="jumptext" v-else>请选择类目</text>
			</view>
			<view class="normalline">
				<view class="linetext"><text>*</text>货品标题</view>
				<u-input v-model="title" type="text" :border="false" placeholder="请输入货品标题" maxlength="30"
					placeholderStyle="color:#B9B9B9" :auto-height="false" class="lineputs" :clearable="false" />
			</view>
			<view class="normalline" v-if="!is_double">
				<view class="linetext"><text>*</text>货品数量</view>
				<u-input v-model="stock" type="number" :border="false" placeholder="请输入货品数量" maxlength="6"
					placeholderStyle="color:#B9B9B9" :auto-height="false" class="lineputs" :clearable="false" />

			</view>
			<view class="normalline">
				<view class="linetext"><text>*</text>货品单位</view>
				<picker @change="setunit" :value="unitindex" :range="unitnamelist" style="width: 80%;text-align: end;">
					<text class="danwei">{{unitnamelist[unitindex]}}</text>
					<u-icon name="arrow-down" color="#A2A2A2" size="24" class="_arrow"></u-icon>
				</picker>
			</view>
			<view class="normalline" @click="setspec">
				<view class="linetext"><!-- <text>*</text> -->货品属性</view>
				<view class="linevalue" v-if="params">{{params}}</view>
				<text class="jumptext" v-else>请选择货品属性</text>
			</view>


			<view class="normalline" @click="setmore" v-if="is_double">
				<!-- <navigator :url="'./addsku?cate_ids='+cate.id+'&good_id='+id" open-type="navigate" hover-class="none"
					class="normalline" v-if="is_double"> -->
				<view class="linetext"><text>*</text>货品规格</view>
				<!-- <view class="linevalue" v-if="params">{{params}}</view> -->
				<text class="jumptext">{{spec_many?'已填写货品规格':'请选择货品规格'}}</text>
				<!-- </navigator> -->
			</view>

			<!-- <view class="normalline" v-if="!is_double">
				<view class="linetext"><text>*</text>成本价</view>
				<u-input v-model="cost_price" type="digit" :border="false" placeholder="请输入成本价" maxlength="8"
					placeholderStyle="color:#B9B9B9" :auto-height="false" class="lineputs" :clearable="false" />
				<text class="danwei">元</text>
			</view> -->
			<view class="normalline" v-if="!is_double">
				<view class="linetext"><!-- <text>*</text> -->供应单价</view>
				<u-input v-model="money" type="digit" :border="false" placeholder="请输入供应单价" maxlength="8"
					placeholderStyle="color:#B9B9B9" :auto-height="false" class="lineputs" :clearable="false" />
				<text class="danwei">元</text>
			</view>

			<view class="normalline" @click="showsh=true">
				<!-- <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
					themeColor="#007AFF"></simple-address> -->
				<view class="linetext"><text>*</text>供应地址</view>
				<view class="lineputs">
					<view class="flex_bet_align lineputs">
						<text class="jumptext" v-if="!city[0]">请选择供应地址</text>
						<text class="clamp1" style="max-width: 400rpx;" v-if="city[0]">{{city[0]}} {{city[1]}} {{city[2]}}</text>
						<text class="iconfont icon-xwtubiaoku-03"></text>
					</view>
				</view>
			</view>
			<view class="" v-if="city[0]!=''">
				<u-picker v-model="showsh" @confirm="setcity" :range="city" :default-region="city" mode="region"
					class="lineputs"></u-picker>
			</view>

			<view class="normalline">
				<view class="linetext"><text>*</text>支持看货</view>
				<u-input type="number" :border="false" placeholder="开启为支持看货" placeholderStyle="color:#B9B9B9"
					:auto-height="false" class="lineputs" :disabled="true" :clearable="false" />
				<!-- <u-switch v-model="is_browse" active-color="#38BE8C" inactive-color="#eee" size="56"></u-switch> -->
				<switch @change="browseChange" checked color="#38BE8C" />
			</view>
			<view class="normalline">
				<view class="linetext"><text>*</text>退林还耕</view>
				<u-input type="number" :border="false" placeholder="开启为属于退林还耕处理货" placeholderStyle="color:#B9B9B9"
					:auto-height="false" class="lineputs" :disabled="true" :clearable="false" />
				<!-- <u-switch v-model="is_browse" active-color="#38BE8C" inactive-color="#eee" size="56"></u-switch> -->
				<switch @change="handleChange" checked color="#38BE8C" />
			</view>

			<view class="normalline" @click="geimpclass()">
				<view class="linetext"><!-- <text>*</text> -->苗圃分类</view>
				<view class="linevalue" v-if="mpcate.name">{{mpcate.name}}</view>
				<text class="jumptext" v-else>请选择分类</text>
			</view>

			<view class="textarealine">
				<view class="linetext"><!-- <text>*</text> -->备注说明</view>
				<view class="textareabox">
					<u-input v-model="content" type="textarea" :border="false" placeholder=" 请输入备注说明"
						placeholderStyle="color:#B9B9B9" class="textarea_content" maxlength="50" :clearable="false" />
					<text>{{content.length}}/50</text>
				</view>
			</view>
			<view class="imgboxline">
				<view class="imgboxtitle">
					<text class="_xing">*</text>上传内容<text class="_number">({{images.length}}/9)</text>
				</view>
				<view class="imgboxmetion">说明：此处上传封面图及详情图</view>
				<view class="photos">
					<view class="photobox">
						<u-upload ref="upload" max-size="12328959" :action="action" width="210" height="210" :auto-upload="false"
							max-count="9" :file-list="echoimages" @on-remove="removeimg" @on-uploaded="uploaded">
						</u-upload>
					</view>
				</view>
				<view class="imgboxmetion">说明：视频（轮播图第一个位置，非必传）</view>
				<view class="photos">
					<view class="photobox">
						<u-row gutter="16">
							<video class="video" :src="video" v-if="video"></video>
							<view class="iconfont icon-cangpeitubiao_shanchu" v-if="video" @click="remvideo"></view>
							<u-button v-if="video" type="success" throttle-time="1000" @click="uploadvideo">重新选择
							</u-button>
							<u-col span="12" v-if="!video" @click="uploadvideo">
								<view class="imgupdata">
									<image src="../../static/img/xj.png" mode="widthFix"></image>
									<view class="text">选择视频</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
		<view class="submitbox">
			<view class="submitbtn" @click="submit">{{id>0?'确认修改':'确认发布'}}</view>
		</view>
		<view class="mask" v-if="successwindow">
			<view class="maskcontent">
				<text class="masktitle">发布成功</text>
				<view class="maskmetions">请前往 个人中心-我的苗店 查看发布内容！</view>
				<view class="submitgo" @click="successwindow=false">继续发布</view>
				<navigator url="/home/station/stationpage?operate=true" open-type="redirectTo" hover-class="none"
					class="tomiao">前往苗店</navigator>
			</view>
			<u-icon name="close-circle" color="#fff" size="60" @click="successwindow=false"></u-icon>
		</view>
	</view>
</template>

<script>
	import amapFile from "../../static/js/amap-wx.js"
	import App from '@/App.vue';
	var _this, shake;
	export default {
		data() {
			return {
				isShowLoading: false,
				settingdata: {
					name: '发布供应',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "submit"
				},
				// 修改供应用的id
				id: '',
				// 分类
				cate: {
					name: "",
					id: ""
				},
				// 苗圃分类
				mpcate: {
					name: "",
					id: ""
				},
				// 货物名称
				title: "",
				// 单位
				unit: [],
				unitnamelist: [],
				// 选中的单位
				unitindex: 0,
				// 显示的时候返回的单位中文
				unittext: "",
				// 货品数量
				stock: "",
				// 货品规格
				params: "",
				// 单价
				money: "",
				// 成本价
				cost_price: "",
				// 供应地址
				city: [],
				// 是否支持看货
				is_browse: true,
				// 是否退林还耕处理货
				is_handle: false,
				// 备注
				content: "",
				// 上传内容
				images: [],
				// 回显的img
				echoimages: [],
				// 图片上传请求路径
				action: "",
				//视频上传
				video: "",
				// 后台需要的视屏地址
				videourl: "",
				// 弹窗提示
				successwindow: false,
				//是否是多规格
				is_double: false,
				// 多规格字符串
				spec_many: '',
				cityPickerValueDefault: [0, 0, 1],
				showsh: false,
			}
		},
		onLoad(options) {
			_this = this
			_this.action = _this.$api.getbase() + 'fileupload'
			if (options.id > 0) {
				_this.id = options.id
				_this.settingdata.name = "修改供应"
				_this.getdata()
			} else {
				_this.getunit()
				_this.getaddress()
			}
			uni.removeStorageSync("spec_many")
		},
		onShow() {
			if (_this.unit.length < 1) {
				_this.getunit()
			}
			if (uni.getStorageSync("cate")) {
				_this.cate = uni.getStorageSync("cate");
				_this.title = _this.cate.s_name;
				console.log(_this.cate);
				_this.params = "";
				uni.removeStorageSync("cate");
			}
			if (uni.getStorageSync("spec")) {
				_this.params = uni.getStorageSync("spec")
				uni.removeStorageSync("spec")
			}
			if (uni.getStorageSync("selectfahuo")) {
				let info = uni.getStorageSync("selectfahuo")
				console.log(123)
				_this.city = [info.province, info.city, info.area]
			}
			if (uni.getStorageSync('spec_many')) {
				this.spec_many = uni.getStorageSync('spec_many')
			}
			
			if (uni.getStorageSync("shopcate")) {
				_this.mpcate = uni.getStorageSync("shopcate")
				uni.removeStorageSync("shopcate")
			}
		},
		onHide() {
			uni.removeStorageSync("selectfahuo")
		},
		methods: {
			doubleChange: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
				_this.is_double = e.target.value
			},
			browseChange: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
				_this.is_browse = e.target.value
			},
			handleChange: function(e) {
				console.log('switch3 发生 change 事件，携带值为', e.target.value)
				_this.is_handle = e.target.value
			},
			// 获取发货地址数据
			getaddress() {
				_this.$api.get("getsupplyaddress", {}).then(data => {
					_this.city = [data[0]?.province, data[0]?.city, data[0]?.area]
				});
			},
			// 获取数据
			getdata() {
				_this.$api.get("getreleasegoods", {
					id: _this.id
				}).then(data => {
					console.log(data)
					_this.cate.id = data.cate_ids
					_this.cate.name = data.cate_name
					_this.title = data.title
					_this.unittext = data.unit
					_this.stock = data.stock
					_this.params = data.spec
					_this.money = data.money
					_this.cost_price = data.cost_price
					_this.city = data.city.split(',')
					_this.is_browse = data.is_browse == 2 ? true : false
					_this.is_handle = data.is_handle == 2 ? true : false
					_this.content = data.content
					_this.images = data.images_path
					_this.video = data.video_path[0]
					_this.videourl = data.video[0]
					_this.spec_many = data.spec_type == 2 ? data.specData : ''
					_this.is_double = data.spec_type == 1 ? false : true
					if (_this.spec_many) {
						let datas = _this.spec_many
						console.log(data.multi_images)
						if (data.multi_images.length > 0) {
							datas.spec_attr[0].checked = true
							datas.spec_attr[0].spec_items.forEach((item, index) => {
								datas.spec_attr[0].spec_items[index].image_path = data.multi_images[index]
								datas.spec_attr[0].spec_items[index].image = data.multi_images_path[index]
							})
						}
						datas = JSON.stringify(datas)
						uni.setStorageSync('spec_many', datas)
						_this.spec_many = datas
					}
					data.images.forEach(item => {
						_this.echoimages.push({
							url: item
						})
					})
					_this.getunit()
				});
			},
			// 选择分类
			geiclass() {
				uni.navigateTo({
					url: "/home/submit/choosecatgory"
				})
			},
			// 选择苗圃分类
			geimpclass() {
				uni.navigateTo({
					url: "/personal/shopSort?isParentSet=true",
				})
			},
			// 获取单位
			getunit() {
				_this.$api.get("checkauth", {})
				// _this.$api.get("authenticationinfo", {}).then(data => {
				// 	if (!data.realname) {
				// 		uni.showModal({
				// 			content: '请先完成实名认证后再进行内容发布',
				// 			showCancel: false,
				// 			success: function(res) {
				// 				if (res.confirm) {
				// 					uni.navigateBack({
				// 						delta: 1
				// 					})
				// 				}
				// 			}
				// 		});
				// 	}
				// });
				_this.$api.get("unit", {}).then(data => {
					let index = 0
					for (var item in data) {
						_this.unit.push({
							key: item,
							name: data[item]
						})
						if (_this.unittext == item) {
							_this.unitindex = index
						}
						_this.unitnamelist.push(data[item])
						index++
					}
				});
			},
			// 设置单位
			setunit(e) {
				_this.unitindex = e.target.value
			},
			// 切换城市
			openAddres() {
				_this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				_this.city = e.label.split('-');
			},
			setcity(e) {
				_this.city = [e.province.label, e.city.label, e.area.label]
				console.log(_this.city)
			},
			// 获取当前位置
			getcity() {
				new amapFile.AMapWX({
					key: App.mapkey
				}).getRegeo({
					success: function(data) {
						let address = data[0].regeocodeData.addressComponent
						let location = address.streetNumber.location.split(',')
						_this.lat = location[1]
						_this.lon = location[0]
						_this.city = [address.province, address.city, address.district]
						console.log(1111)
					},
					fail: function(data) {
						console.log(2222)
					}
				})
			},
			// 选择货品规格
			setspec() {
				if (!_this.cate.id) {
					uni.showToast({
						title: "请选择分类",
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "/home/submit/choosesku?id=" + _this.cate.id
					})
				}
			},
			setmore() {
				if (!_this.cate.id) {
					uni.showToast({
						title: "请选择分类",
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "/home/submit/addsku?cate_ids=" + _this.cate.id + '&good_id=' + _this.id
					})
				}
			},

			// 删除图片
			removeimg(e) {
				_this.images.splice(e, 1)
			},
			// 上传成功
			uploaded(e) {
				_this.images = _this.images ? _this.images : []
				e.forEach((item, index) => {
					if (item.response) {
						if (item.response.code == 1) {
							_this.images.push(item.response.data.url)
						} else {
							_this.$refs['upload'].remove(index)
						}
					}
				})
			},
			// 视频上传
			uploadvideo() {
				// 选择视频
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res) => {
						const tempFilePath = res.tempFilePath;
						_this.video = tempFilePath
					}
				});
				
				// _this.$plug.uploadvideo(_this.action, function(data) {
				// 	_this.video = data.fullurl
				// 	_this.videourl = data.url
				// })
			},
			// 删除视频
			remvideo() {
				_this.video = ""
				_this.videourl = ""
			},
			// 提交
			submit() {
				console.log(_this.is_double, '单双规格')
				_this.click_shake(async () => {
					let data = [{
							value: _this.cate.name,
							type: 1,
							title: "请选择货品类目"
						}, {
							value: _this.title,
							type: 1,
							title: "请输入货品标题"
						},  {
							value: _this.city.length,
							type: 2,
							title: "请选择供应地址"
						}, {
							value: _this.$refs?.upload?.lists?.length || 0,
							type: 2,
							title: "请选择封面图"
						}

					]
					if (!_this.is_double) {
						data.push({
							value: _this.stock,
							type: 1,
							title: "请输入货品数量"
						})
						// data.push({
						// 	value: _this.money,
						// 	type: 1,
						// 	title: "请输入供应单价"
						// })
						// data.push({
						// 	value: _this.cost_price,
						// 	type: 1,
						// 	title: "请输入成本价"
						// })
					}
					let spec_many = ''
					let multi_images = []
					if (this.spec_many && _this.is_double) {
						spec_many = JSON.parse(this.spec_many)
						console.log(spec_many.spec_attr)
						spec_many.spec_attr.some((item, index) => {
							if (item.checked) {
								item.spec_items.forEach((items, indexs) => {
									multi_images.push(items.image)
								})
								let data = {
									...item
								}
								spec_many.spec_attr[index] = {
									...spec_many.spec_attr[0]
								}
								spec_many.spec_attr[0] = {
									...data
								}
								return true
							}
						})
						console.log(spec_many.spec_attr)
						spec_many.spec_list.forEach((item, index) => {
							spec_many.spec_list[index].form = {
								image: item.form.image,
								cost_price: item.form.cost_price,
								stock: item.form.stock,
								money: item.form.money,
							}
						})
						spec_many = JSON.stringify(spec_many)
					}

					console.log(_this.images)
					if (_this.$plug.verify(data)) {
						
						this.isShowLoading = true
						
						// 上传图片
						if (_this.$refs?.upload?.lists?.length) {
							await this.uploadImage()
						}
						
						// 上传視頻
						if (_this.video) {
							const videoData = await this.uploadVideo()
							_this.video = videoData.fullurl
							_this.videourl = videoData.url
						}
						
						let info = {
							cate_ids: _this.cate.id,
							cate_id: _this.mpcate.id,
							title: _this.title,
							params: _this.params,
							money: _this.money ? _this.money : 0,
							city: _this.city.join(','),
							content: _this.content,
							images: _this.videourl ? _this.images.concat(_this.videourl) : _this
								.images,
							unit: _this.unit[_this.unitindex].key,
							is_browse: _this.is_browse ? 2 : 1,
							is_handle: _this.is_handle ? 2 : 1,
							stock: _this.is_double ? 1 : _this.stock,
							supply_type: 1,
							spec_type: _this.is_double ? 2 : 1,
							// cost_price: _this.cost_price ? _this.cost_price : 1,
							spec_many: _this.is_double ? spec_many : 1,
							multi_images: multi_images.length > 0 ? multi_images.join(',') : ''
						}

						if (_this.id > 0) {
							info.supply_type = 2
							info.id = _this.id
						} else {
							info.supply_type = 1
						}
						_this.$api.post("releasegoods", info).then(data => {
							this.isShowLoading = false
							if (_this.id > 0) {
								uni.showToast({
									title: "修改成功"
								})
								_this.$plug.isonshow(2)
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 500);
							} else {
								if (_this.is_double == 2) {
									uni.removeStorageSync('spec_many')
								}
								uni.redirectTo({
									url: '../success/success'
								})
							}

						}).catch(err =>{
							this.isShowLoading = false
						});
					}
				})
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
			// 一次性上传图片
			uploadImage() {
				return new Promise((resolve,reject) => {
					_this.uploaded = (e) => {
						_this.images = _this.images ? _this.images : []
						e.forEach((item, index) => {
							if (item.response) {
								if (item.response.code == 1) {
									_this.images.push(item.response.data.url)
								} else {
									_this.$refs['upload'].remove(index)
								}
							}
						})
						resolve()
					}
					_this.$refs.upload.upload();
				})
			},
			// 上传视频
			uploadVideo() {
				return new Promise((resolve,reject) => {
					uni.uploadFile({
						url: _this.action, //仅为示例，非真实的接口地址
						filePath: this.video,
						name: 'file',
						formData: {
							'user': 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data).data
							resolve(data)
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boxs {
		padding: 0 25rpx;
		display: flex;
		flex-direction: column;
		border-top: 10rpx solid #F2F2F2;
		padding-bottom: 170rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 170rpx);

		.normalline {
			height: 120rpx;
			padding: 0 0 0 9rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 2rpx solid #E6E6E6;

			.linetext {
				color: #222222;
				font-size: 30rpx;
				font-weight: bold;
				width: 200rpx;

				text {
					color: #FF0000;
				}
			}

			.jumptext {
				color: #B9B9B9;
				font-size: 30rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				flex: 1;
			}

			.linevalue {
				color: #222222;
				font-size: 30rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				flex: 1;
			}

			.lineputs {
				flex: 1;
			}

			.danwei {
				color: #222222;
				font-size: 30rpx;
			}

			._arrow {
				margin-left: 11rpx;
			}
		}

		.textarealine {
			display: flex;
			flex-direction: column;
			padding: 39rpx 0 39rpx 9rpx;
			border-bottom: 2rpx solid #E6E6E6;

			.linetext {
				color: #222222;
				font-size: 30rpx;
				font-weight: bold;

				text {
					color: #FF0000;
				}
			}

			.textareabox {
				padding: 25rpx 29rpx;
				background: #F9F9F9;
				border: 2rpx solid #DADADA;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				margin-top: 40rpx;

				text {
					font-weight: normal;
					color: #999999;
					font-size: 20rpx;
					text-align: right;
					margin-top: 20rpx;
				}
			}
		}

		.imgboxline {
			display: flex;
			flex-direction: column;
			padding-left: 9rpx;

			.imgboxtitle {
				margin-top: 43rpx;
				color: #222222;
				font-size: 30rpx;
				font-weight: bold;

				._xing {
					color: #FF0000;
				}

				._number {
					margin-left: 10rpx;
					color: #999999;
					font-size: 28rpx;
				}
			}

			.imgboxmetion {
				margin-top: 26rpx;
				color: #BEBEBE;
				font-size: 24rpx;
			}

			.photos {
				display: flex;
				flex-direction: column;
				margin-top: 27rpx;

				.photobox {
					margin-top: 10rpx;
					position: relative;

					.video {
						width: 100%;
						height: 410rpx;
						border-radius: 5rpx;
					}

					.iconfont {
						font-size: 34rpx;
						position: absolute;
						right: 0;
						top: 0;
						width: 50rpx;
						height: 50rpx;
						background-color: #F00;
						line-height: 50rpx;
						text-align: center;
						color: #FFFFFF;
						border-radius: 0 0 0 10px;
						z-index: 50;
					}

					.imgupdata {
						width: 100%;
						height: 410rpx;
						border: 2rpx solid #C1C1C1;
						border-radius: 4rpx;
						text-align: center;

						image {
							width: 66rpx;
							height: auto;
							margin: 150rpx auto 40rpx;
						}

						.text {
							width: 100%;
							text-align: center;
							font-size: 30rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}

	.submitbox {
		padding: 39rpx 0 calc(env(safe-area-inset-bottom) + 39rpx) 0;
		padding: 39rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;

		.submitbtn {
			width: 680rpx;
			height: 90rpx;
			border-radius: 45rpx;
			background: linear-gradient(86deg, #38BE8C, #05ADBB);
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba($color: #000000, $alpha: 0.5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 120;

		.maskcontent {
			width: 456rpx;
			height: 438rpx;
			border-radius: 16rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-bottom: 93rpx;
			align-items: center;
			justify-content: center;
			animation: popup 0.5s;

			@keyframes popup {
				0% {
					transform: scale(0.5);
				}

				50% {
					transform: scale(1.1);
				}

				100% {
					transform: scale(1);
				}
			}

			.masktitle {
				margin-top: 33rpx;
				color: #000000;
				font-size: 34rpx;
				font-weight: bold;
			}

			.maskmetions {
				width: 332rpx;
				margin-top: 48rpx;
				color: #999999;
				font-size: 28rpx;
				text-align: center;
			}

			.submitgo {
				margin-top: 54rpx;
				width: 303rpx;
				height: 66rpx;
				border-radius: 33rpx;
				text-align: center;
				line-height: 66rpx;
				background: #38BE8C;
				color: #FFFFFF;
				font-size: 30rpx;
			}

			.tomiao {
				margin-top: 29rpx;
				color: #666666;
				font-size: 30rpx;
			}
		}
	}
</style>
